<template>
  <div>
    <!--导航栏-->
    <div style=" width: 100%;
    height: 74px;
    background-color: #1c52e4;
    box-shadow: 1px 1px 10px #eaeaea;">
      <Header></Header>
    </div>
    <!--内容-->
    <div class="content">
      <img src="../assets/conten_serve.png" style="height: 320px;width: 1300px ;margin-bottom: 20px;margin-top: 40px;margin-left: 80px" alt="">
      <div class="tit">
        热门服务
        <span class="sub-title">热门服务一键直达</span>
      </div>
      <img src="../assets/list_serve.png" style="height: 300px;width: 1200px;margin-bottom: 20px;margin-top: 40px;margin-left: 150px;box-shadow: 3px 3px 10px #9d9fa6" alt="">
      <img src="../assets/list_serve.png" style="height: 300px;width: 1200px;margin-top: 40px;margin-left: 150px;box-shadow: 3px 3px 10px #9d9fa6" alt="">
      <img src="../assets/list_serve.png" style="height: 300px;width: 1200px;margin-top: 40px;margin-left: 150px;box-shadow: 3px 3px 10px #9d9fa6" alt="">
      <img src="../assets/list_serve.png" style="height: 300px;width: 1200px;margin-top: 40px;margin-left: 150px;box-shadow: 3px 3px 10px #9d9fa6" alt="">
      <img src="../assets/list_serve.png" style="height: 300px;width: 1200px;margin-top: 40px;margin-left: 150px;margin-bottom: 20px;box-shadow: 3px 3px 10px #9d9fa6" alt="">
    </div>

    <!--脚页-->
    <Footer></Footer>

  </div>


</template>

<script>
  import Header from "../components/Header";
  import Footer from "../components/Footer";
    export default {
        name: "Serve",
      components:{
        Header,
        Footer,
      }
    }
</script>

<style scoped>
  .header_content {
    width: 100%;
    height: 74px;
    background-color: #ffffff;
    box-shadow: 1px 1px 10px #eaeaea;
    /*position: fixed;*/
  }

  .img_logo {
    float: left;
    width: 130px;
    height: 43px;
    margin-left: 165px;
    margin-top: 16px;
  }

  .link_a a {
    margin-left: 5px;
    margin-right: 10px;
    text-overflow: ellipsis;
    text-decoration: none;
    outline: none;

    color: #333;
    background: transparent;
    cursor: pointer;
    transition: color .1s ease;
  }

  a:hover {
    color: #2d8cf0;
  }

  /*footer*/
  .footer[data-v-05f63236] {
    /*position: absolute;*/
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: #141a25;
    color: #fff;
    font-size: 14px;
    overflow: hidden;
  }

  .footer-content[data-v-05f63236] {
    overflow: hidden;
    min-width: 1200px;
    box-sizing: border-box;
    padding: 48px 0 24px;
    width: 1200px;
    margin: 0 auto;
  }

  .footer-content[data-v-05f63236] {
    overflow: hidden;
    min-width: 1200px;
    box-sizing: border-box;
    padding: 48px 0 24px;
    width: 1200px;
    margin: 0 auto;
  }

  .title[data-v-05f63236] {
    opacity: 1;
    margin-bottom: 24px;
  }

  .box p[data-v-05f63236] {
    opacity: .6;
  }

  .box a[data-v-05f63236] {
    color: #fff;
    margin: 0 32px 24px 0;
    display: inline-block;
  }

  a, a:hover {
    text-decoration: none;
  }

  a {
    outline: none;
  }

  a {
    color: #333;
    background: transparent;
    cursor: pointer;
    transition: color .1s ease;
  }

  a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
  }

  a {
    color: #2d8cf0;
    background: 0 0;
    outline: 0;
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
  }

  .box[data-v-05f63236] {
    width: 33%;
    float: left;
    overflow: hidden;
  }

  .title[data-v-05f63236] {
    opacity: 1;
    margin-bottom: 24px;
  }

  .box p[data-v-05f63236] {
    opacity: .6;
  }

  .content[data-v-05f63236] {
    margin-bottom: 14px;
  }



  .content[data-v-05f63236] {
    margin-bottom: 14px;
  }

  .icon.icon-cooperation[data-v-05f63236] {
    vertical-align: -3px;
    color: hsla(0, 0%, 100%, .7);
    font-size: 16px;
    margin-right: 10px;
  }

  .icon[data-v-05f63236] {
    vertical-align: -4px;
    margin-right: 8px;
  }

  [class*=" icon-"], [class^=icon-] {
    font-family: icomoon !important;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .box[data-v-05f63236] {
    width: 33%;
    float: left;
    overflow: hidden;
  }

  .title[data-v-05f63236] {
    opacity: 1;
    margin-bottom: 24px;
  }

  .box p[data-v-05f63236] {
    opacity: .6;
  }

  .content[data-v-05f63236] {
    margin-bottom: 14px;
  }

  .content span[data-v-05f63236] {
    margin-right: 24px;
  }

  .content span[data-v-05f63236] {
    margin-right: 24px;
  }

  .tip[data-v-05f63236] {
    opacity: .4;
    width: 1200px;
    margin: 0 auto;
    border-top: 1px solid hsla(0, 0%, 100%, .4);
    padding: 24px 0;
    text-align: center;
  }

  .tip a[data-v-05f63236] {
    color: #fff;
  }

  .tit {
    font-weight: 700;
    font-size: 24px;
    color: #000;
    margin-bottom: 20px;
    margin-left: 80px;
  }

    .sub-title {
    margin-left: 16px;
    font-size: 14px;
    color: #666;
    font-weight: 400;
  }
</style>
